<template>
    <div class="device_left">
        <div class="count_box">
            <div class="device_title">设备统计</div>
            <div class="count_chart" ref="count_chart">图表</div>
        </div>

        <div class="real_box">
            <div class="device_title">实时用电</div>
            <div class="electricity_box">
                <div>
                    <img src="../../../assets/images/用电量.png">
                    <div>
                        <p class="p1">{{ allelectricity }}</p>
                        <p>总用电量(kW)</p>
                    </div>
                </div>
                <div>
                    <img src="../../../assets/images/用电量.png">
                    <div>
                        <p class="p1">{{ timeelectricity }}</p>
                        <p>总用电量(kW/h)</p>
                    </div>
                </div>
            </div>
            <div class="realelectricity_chart" ref="realelectricity_chart">图表</div>
        </div>

        <div class="site_box">
            <div class="device_title">场地使用</div>
            <div class="site_chart" ref="site_chart">图表</div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import './left.css'
import { getCount, getRealElectricity, getSite } from '../../../api';

const countdata = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'right',
        top: 'top',
        orient: 'vertical',
        data: ['监控类', '消防类', '其他类'],
        textStyle: {
            color: 'white'
        },
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: [20, 50],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 33, name: 'rose 2' },
                { value: 28, name: 'rose 3' }
            ]
        }
    ]
});
const realelectricitydata = ref({
    grid: {
        left: '14%',
        right: '4%',
        top: '14%',
        bottom: '12%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(43, 62, 123, 1)',
            }
        }
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                width: 2,
                color: 'rgba(255, 0, 64, 1)'
            },
            areaStyle: {},
            color: '#8a2be2'
        }
    ]
});
const site_data = ref({
    grid: {
        left: '10%',
        right: '4%',
        top: '14%',
        bottom: '20%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: ['图书馆', '体育馆', '实验楼', '超市', '会议楼'],
        axisTick: {
            show: false
        },  
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(43, 62, 123, 1)',
            }
        },
        axisLabel: {
            show: false
        }
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '30%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(192, 0, 255, .2)',
                borderRadius: [20, 20, 0, 0]
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#203AFF' },
                        { offset: 1, color: '#C000FF' }
                    ]
                },
                barBorderRadius: [20, 20, 0, 0],
            },
        }
    ]
});

const count_chart = ref(null);
const realelectricity_chart = ref(null);
const site_chart = ref(null);

const allelectricity = ref(0);
const timeelectricity = ref(0);

const CountData = async () => {
    try {
        let res = await getCount();

        const mycount_chart = echarts.init(count_chart.value);
        countdata.value.series[0].data = res.data.data;
        mycount_chart.setOption(countdata.value);
    } catch (error) {
        console.error('获取设备统计数据时出错:', error);
    }
}

const RealElectricityData = async () => {
    try {
        let res = await getRealElectricity();
        realelectricitydata.value.series[0].data = res.data.data;

        allelectricity.value = realelectricitydata.value.series[0].data.reduce((sum, item) => sum += item.value, 0);
        timeelectricity.value = realelectricitydata.value.series[0].data[11].value;

        const myrealelectricity_chart = echarts.init(realelectricity_chart.value);
        myrealelectricity_chart.setOption(realelectricitydata.value);
    } catch (error) {
        console.error('获取实时用电数据时出错:', error);
    }
}

const SiteData = async () => {
    try {
        let res = await getSite();

        site_data.value.xAxis.data = res.data.data.map(item => {
            return item.title
        })
        site_data.value.series[0].data = res.data.data.map((item) => {
            return item.value
        });

        const mysite_chart = echarts.init(site_chart.value);
        mysite_chart.setOption(site_data.value);
    } catch (error) {
        console.error('获取场地数据时出错:', error);
    }
}

onMounted(() => {
    CountData();
    RealElectricityData();
    SiteData();

    
    window.addEventListener('resize', () => {
        if (count_chart.value) echarts.getInstanceByDom(count_chart.value).resize();
        if (realelectricity_chart.value) echarts.getInstanceByDom(realelectricity_chart.value).resize();
        if (site_chart.value) echarts.getInstanceByDom(site_chart.value).resize();
    })
})
</script>

<style></style>
